import React, { useEffect, useRef, useState } from "react";
import Taro, { useRouter, useDidShow } from "@tarojs/taro";
import { View, Text, Input, Form, Image, Button } from "@tarojs/components";
import { setData, getData } from "@/src/globalData";
import { imgUrlPrefix } from "@/common/config";
import iconPen from "@/images/pen_icon.png";
import iconEmail from "@/images/email_icon.png";
import CustomerModal from "@/components/CustomerModal";

import "./index.scss";
import * as api from "./api";

const Index: React.FC<{}> = () => {
  const [orderInfo, setOrderInfo] = useState<{ [key: string]: any }>({
    invoice_info: {},
  });
  const [flag, setFlag] = useState(false);
  const [focus, setFocus] = useState(true);
  const [email, setEmail] = useState("");
  const modalRef = useRef();
  const router = useRouter();

  useDidShow(() => {
    setFlag(!flag);
  });

  useEffect(() => {
    console.log("router--->>", router);
    if (router.params.params) {
      setOrderInfo(JSON.parse(router.params.params));
    }
  }, [router]);

  const onSubmit = async (e) => {
    console.log("e----------->>>", e.detail.value);
    const values = e.detail.value;
    if (!values.email) {
      Taro.showToast({
        title: "请填写邮箱！",
        icon: "none",
      });
      setFocus(true)
      return;
    }
    if (!getData("signImgUrl")) {
      Taro.showToast({
        title: "请签署合同！",
        icon: "none",
      });
      return;
    }
    Taro.showLoading({
      title: "合同签署中...",
    });
    const { result, status } = await api.customer_contract_autograph({
      contract_id: orderInfo.contract_info.id,
      contract_info: JSON.stringify({
        email: values.email,
        autograph: getData("signImgUrl"),
      }),
    });
    Taro.hideLoading();
    if (status === "ok") {
      Taro.navigateBack();
    }
  };

  const goDrawBoard = () => {
    Taro.navigateTo({
      url: "/pages/drawBoard/index",
    });
  };

  useEffect(() => {
    return () => {
      setData("signImgUrl", "");
    };
  }, []);

  return (
    <View className="singer-contract-page">
      <Form onSubmit={onSubmit}>
        <View className="form-area">
          <View className="form-item">
            <View className="label">签署人</View>
            <Input
              className="value"
              name="name"
              placeholder="请填写签署人姓名"
              placeholderClass="placeholder"
              disabled
              value={orderInfo.invoice_info.name}
            />
          </View>
          <View className="form-item">
            <View className="label">手机号</View>
            <Input
              placeholder="请输入手机号"
              className="value"
              name="phone"
              placeholderClass="placeholder"
              type="number"
              maxlength={11}
              disabled
              value={orderInfo.invoice_info.phone}
            />
          </View>
          <View className="form-item">
            <View className="label">身份证</View>
            <Input
              placeholder="请输入身份证号"
              className="value"
              name="identification"
              placeholderClass="placeholder"
              type="idcard"
              disabled
              value={orderInfo.invoice_info.identification}
            />
          </View>
          <View className="form-item">
            <View className="label">邮箱</View>
            <Input
              placeholder="请输入邮箱"
              className="value"
              name="email"
              focus={focus}
              placeholderClass="placeholder"
              value={email}
              onInput={(e) => {
                setEmail(e.detail.value);
              }}
              onBlur={() => {
                setFocus(false);
              }}
            />
          </View>
        </View>

        <View className="contract-wrapper">
          {orderInfo?.contract_info?.img_url.map((item) => (
            <Image
              key={imgUrlPrefix + item}
              className="contract"
              mode="widthFix"
              src={imgUrlPrefix + item}
            />
          ))}

          <Image
            className="sign-img"
            mode="widthFix"
            src={getData("signImgUrl")}
          />
        </View>

        <View className="blank"></View>
        <View className="footer-content">
          <View className="l">
            <View className="item" onClick={goDrawBoard}>
              <Image className="icon" src={iconPen} />
              <Text>手签</Text>
            </View>
            <View
              className="item"
              onClick={() => {
                setFocus(true);
              }}
            >
              <Image className="icon" src={iconEmail} />
              <Text>邮箱</Text>
            </View>
          </View>
          <View className="r">
            <Button formType="submit">
              <View className="button">提交</View>
            </Button>
          </View>
        </View>
      </Form>
    </View>
  );
};

export default Index;
